<template>
    <div class="editType" ref="showSpecsDialog" >
        <el-dialog width="60%" @close="dialogClose" :visible="showSpecsDialog" title="修改规格值">
            <div class="box header">
                <div>规格值</div>
                <div>排序</div>
                <div>操作</div>
            </div>
            <div v-for="(item,index) in attrs.valueList" :key="index" class="box">
                <div>
                    <el-input type="text" v-model="item.valueStr" style="width: 100px;margin-right:10px;"></el-input>
                    <el-button type="success" icon="el-icon-edit" size="mini" @click="editName(item)">修改</el-button>
                </div>
                <div>

                </div>
                <div>
                    <el-button type="success" icon="el-icon-edit" size="mini" @click="del(item)">删除</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    addSpces,
    addExpandAttrValue,
    delExpandAttrValue
} from "@/api/agri-product/goodsType"

export default {
    name: 'productTypeEditDL',
    data () {
        return {
            editForm: {
                name: '',
                displaySeq: true
            },
            DialogVisible: true,
            rules: {
                name :[{required: true, message: '请输入扩展属性名称', trigger: 'blur'}]
            },
            expandData: [],
        }
    },
    props: ['showSpecsDialog', 'attrs', 'typeId'],
    created () {
        console.log(this.editForm, this.visible,this.attrs, '11111')
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        //关闭弹窗
        dialogClose (status) {
            this.$emit("cancelSpces", status);
        },
        editName (value) {
            if (value.valueStr.trim().length === 0) {
                this.$message({
                    type: 'info',
                    message: '修改失败,规格值不能为空'
                });
                return;
            }
            let data = {};
            data.id = value.id;
            data.attrId = value.attrId;
            data.displaySeq = value.displaySeq;
            data.imageUrl = value.imageUrl;
            data.valueStr = value.valueStr;
            addExpandAttrValue(data).then(res => {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                this.$emit('success', true)
            }).catch(err => {
                this.$message({
                    type: 'info',
                    message: '修改失败'
                });
            })
        },
        del (item) {
            delExpandAttrValue(item.id).then(res => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.$emit('success',true)
            }).catch(err => {
                this.$message({
                    type: 'info',
                    message: '删除失败'
                });
            })
        }
    }
}
</script>

<style scoped>
.info {
    height: 16px;
    line-height: 16px;
    margin: 0;
}
.box {
    display: flex;
    justify-content: center;
}
.box>div,.header>div {
    width: 33%;
    text-align: center;
    display: flex;
    border-bottom: 1px solid #eee;
}
.header {
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
</style>